<template>
  <div id="companyList">
    <el-input size="small" @keyup.enter.native="searchHandle" style="width: 300px" v-model="keywords" placeholder="搜索企业或注册账号名称"></el-input>
    <el-button @click="searchHandle()" style="margin-left: 10px" type="primary" icon="el-icon-search" size="small">搜索</el-button>
    <div style="display: inline-block;margin-left: 20px;font-size:14px;">
      筛选：
      <el-radio v-model="hasAuth" label='0' @change="searchHandle">未审核</el-radio>
      <el-radio v-model="hasAuth" label='2' @change="searchHandle">未通过</el-radio>
    </div>
    <el-table
        height="536"
        :data="companyList"
        v-loading="loading"
        element-loading-text="拼命加载中"
        style="width: 99.5%">
      <el-table-column
          label="序号"
          align="center"
          type="index"
          :index="indexMethod">
      </el-table-column>
      <el-table-column
          label="企业名称"
          prop="companyName"
          align="center"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          label="注册账号"
          prop="userName"
          align="center"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          label="联系电话"
          prop="tel"
          align="center"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          label="企业类型"
          align="center"
          show-overflow-tooltip>
        <template slot-scope="scope">
          {{scope.row.companyType==0?'国企':scope.row.companyType==1?'央企':scope.row.companyType==2?'民营':'外企'}}
        </template>
      </el-table-column>
      <el-table-column
          label="法人"
          align="center"
          prop="legalPerson"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          label="所在城市"
          align="center"
          show-overflow-tooltip>
        <template slot-scope="scope" >
          {{codeToCity(scope.row.cityCode)}}
        </template>
      </el-table-column>
      <el-table-column
          label="营业执照"
          align="center"
          show-overflow-tooltip>
        <template slot-scope="scope">
          <el-link type="primary" :underline="false" :href="scope.row.businessLicenseUrl">下载</el-link>
        </template>
      </el-table-column>
      <el-table-column
          label="社会统一信用码"
          prop="uniformCreditCode"
          align="center"
          width="170%"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          label="操作"
          align="center"
          width="230%">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="light" content="企业详情" placement="top" >
            <el-button @click="detailInfo(scope.row)" size="mini" type="success" class="iconfont icon-qiyexinxi"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="注册者信息" placement="top" >
            <el-button @click="userInfo(scope.row.userName)" size="mini" type="info" class="iconfont icon-xiangqing"></el-button>
          </el-tooltip>
          <el-tooltip class="item" v-show="hasAuth!='2'" effect="light" content="审核通过" placement="top" >
            <el-button @click="aduit(scope.row.companyId,scope.row.companyName,'pass')" size="mini" class="iconfont icon-shenhetongguo" type="success"></el-button>
          </el-tooltip>
          <el-tooltip class="item" v-show="hasAuth!='2'" effect="light" content="审核不通过" placement="top" >
            <el-button @click="aduit(scope.row.companyId,scope.row.companyName,'noPass')" size="mini" class="iconfont icon-shenhebutongguo" type="danger"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="total,prev, pager, next"
        :total="total"
        align="center"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :hide-on-single-page="value"
        style="padding-top: 15px"
    >
    </el-pagination>
    <el-dialog title="企业详细信息" center :visible.sync="detailInfoVisible" width="60%" :close-on-click-modal="false"
               :lock-scroll="false">
      <el-descriptions  direction="horizontal" :column="3" size="small" border>
        <el-descriptions-item>
          <template slot="label">
            企业名称
          </template>
          {{ company.companyName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            注册账号
          </template>
          {{ company.userName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            企业类型
          </template>
          {{company.companyType==0?'国企':company.companyType==1?'央企':company.companyType?'民营':'外企'}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            行业
          </template>
          {{ company.industry }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            所在城市
          </template>
          {{ company.cityCode }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            详细地址
          </template>
          {{ company.address }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            企业logo
          </template>
          <el-image shape="square"  style="height:40px;" :src="company.companyLogoUrl" ></el-image>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            营业执照
          </template>
          <el-link :href="company.businessLicenseUrl" target="_blank" type="primary" :underline="false" style="font-size:12px">
            营业执照链接
          </el-link>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            企业规模
          </template>
          {{ company.companyScale }}人
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            联系电话
          </template>
          {{ company.tel }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            联系邮箱
          </template>
          {{ company.email }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            融资上市情况
          </template>
          {{ company.financeList }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            注册资本
          </template>
          {{ company.registeredCapital }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            创立时间
          </template>
          {{ company.buildTime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            统一社会信用代码
          </template>
          {{ company.uniformCreditCode }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            官网地址
          </template>
          <el-link :href="company.officialWebsiteUrl" target="_blank" type="primary" :underline="false" style="font-size:12px">
            官网链接
          </el-link>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            招聘官网
          </template>
          <el-link :href="company.recruitUrl" target="_blank" type="primary" :underline="false" style="font-size:12px">
            招聘官网链接
          </el-link>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            法人
          </template>
          {{ company.legalPerson }}
        </el-descriptions-item>
        <el-descriptions-item :span="3" label-style="width:90px">
          <template slot="label">
            法人信息
          </template>
          {{ company.legalPersonInfo }}
        </el-descriptions-item>
        <el-descriptions-item :span="3" label-style="width:90px">
          <template slot="label">
            经营范围
          </template>
          {{ company.businessScope }}
        </el-descriptions-item>
        <el-descriptions-item  :span="3" label-style="width:90px">
          <template slot="label">
            公司简介
          </template>
          {{ company.companyInfo }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <el-dialog title="注册者信息" :visible.sync="dialogUser" width="50%">
      <el-descriptions class="margin-top" :column="3"  border>
        <el-descriptions-item label="企业用户账号">{{ this.user.userName }}</el-descriptions-item>
        <el-descriptions-item label="真实姓名">{{ this.user.realName }}</el-descriptions-item>
        <el-descriptions-item label="头像">
          <el-avatar :src="this.user.photoUrl"></el-avatar>
        </el-descriptions-item>
        <el-descriptions-item label="昵称">{{ this.user.pickName }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ this.user.sex }}</el-descriptions-item>
        <el-descriptions-item label="年龄">{{ this.user.age }}</el-descriptions-item>
        <el-descriptions-item label="居住地">{{ this.user.liveCity }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ this.user.tel }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{this.user.email}}</el-descriptions-item>
        <el-descriptions-item label="状态">{{ this.user.state == 1 ? '启用' : '禁用' }}</el-descriptions-item>
        <el-descriptions-item label="认证材料地址">
          <el-link icon="el-icon-download" :underline="false" type="primary" :href="this.user.authUrl">下载</el-link>
        </el-descriptions-item>
        <el-descriptions-item label="所在公司">{{this.user.companyName}}</el-descriptions-item>
        <el-descriptions-item label="公司职位">{{this.user.position}}</el-descriptions-item>
        <el-descriptions-item label="个人介绍">{{this.user.introduce}}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import {auditCompany, getCompanyList, getUserDetail, noPassUser,} from "../../network/admin";
import {CodeToText} from 'element-china-area-data'

export default {
  name: "CompanyAudit",
  data(){
    return{
      companyList:[],
      company:{},
      loading:true,
      keywords:'',
      value:true,
      currentPage:1,
      total:1,
      pageSize:9,
      detailInfoVisible:false,
      dialogUser:false,
      user:{},
      hasAuth:'0'
    }
  },

  created() {
    this.handleCurrentChange(this.currentPage);
  },
  methods:{
    handleCurrentChange(currentPage){
      getCompanyList(this.keywords,currentPage,this.pageSize,parseInt(this.hasAuth)).then(res=>{
        this.loading=false;
        this.total=res.data.data.total;
        this.companyList=res.data.data.list;
        this.companyList.map(company=>{
          company.cityCode
        })
        this.currentPage=currentPage;
      })
    },
    codeToCity(cityCode){
      return CodeToText[cityCode];
    }
    ,
    searchHandle(){
      this.currentPage = 1;
      this.handleCurrentChange(this.currentPage)
    },
    aduit(companyId,companyName,result){
      auditCompany(companyId,result).then(res=>{
        if(res!=undefined){
          if(res.data.data=="pass"){
            this.$message.success(companyName+"审核通过");
          }else if(res.data.data=="noPass"){
            this.$message.warning(companyName+"审核不通过");
            noPassUser(companyName);
          }
          this.handleCurrentChange(this.currentPage);
        }
      })
    },
    indexMethod(index) {
      return (this.currentPage-1)*this.pageSize+1 + index;
    },
    detailInfo(company){
      this.detailInfoVisible = true;
      this.company = company;
    },
    userInfo(userName){
      getUserDetail(userName).then(res=>{
          this.user=res.data.data;
          this.dialogUser=true;
      })
    }
  }
}
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label{
  min-width: 130px;
  height:50px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-left: 50px;
  margin-bottom: 0;
  width: 40%;
}
.el-form-item__content{
  height:50px;
}
</style>